<template>
  <div class="filter-tab-space">
    <span
      v-for="(tab, index) in tabOpts"
      :key="index"
      :class="['unactive', {active: activeTab === tab.value}]"
      @click="onTabClick(tab)">
      {{ tab.label }}
    </span>
  </div>
</template>

<script>
import { computed} from '../../../docs/.vitepress/cache/deps/vue.js'
import { ref } from 'vue'

export default {
  name: 'FilterTab',
  props: {
    options: {
      type: Array,
      default: [],
      required: true,
    },
  },
  setup(props, { emit }) {

    const tabOpts = computed(() => {
      return props.options
    })

    const activeTab = ref('')

    const onTabClick = ({label, value}) => {
      activeTab.value = value
      emit('updateActiveTab', {label, value})
    }

    return {
      tabOpts,
      activeTab,
      onTabClick,
    }
  }
}
</script>

<style scoped lang="less">
.filter-tab-space {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;

  .unactive {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    height: 32px;
    padding: 4px 15px;
    border-radius: 6px;
    background-color: #ffffff;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
    border: 1px solid #ffffff;
  }
  .unactive:hover {
    color: rgba(31, 113, 255, 1);
  }

  .active {
    color: rgba(31, 113, 255, 1);
    border: 1px solid rgba(31, 113, 255, 1) !important;
    background-color: rgba(43, 121, 255, 0.1) !important;
  }
}
</style>
